<template>
    <div class="home">
        <div class="left-content">
            <div class="item-box">
                <div class="item-title">社区基础信息</div>
                <div class="item-content container">
                    <div class="bg-img">
                        <div class="item-info">
                            <span>{{ homeData.deptCount || 0 }}</span>
                            <p>小区数量</p>
                        </div>
                        <div class="line"></div>
                        <div class="item-info">
                            <span>{{ homeData.channelCount || 0 }}</span>
                            <p>设备数量</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item-box">
                <div class="item-title">告警基础信息</div>
                <div class="base-info container">
                    <div class="item-info" :style="{backgroundColor: item.color}" v-for="(item, index) in baseInfoList"
                         :key="index">
                        <span>{{homeData[item.value] || 0}}</span>
                        <p>{{item.title}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-content">
            <div class="item-box">
                <div class="item-title">高发区域</div>
                <div class="pie-content container">
                    <div id="pieChart"></div>
                </div>
            </div>
            <div class="item-box">
                <div class="item-title">高发时段</div>
                <div class="time-content container">
                    <div id="timeChart"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import request from '@/api/home'
    import * as echarts from "echarts";

    export default {
        name: "home",
        data() {
            return {
                baseInfoList: [
                    {
                        title: "告警总数量",
                        value: "totalAlarmCount",
                        color: "#d1e7fa"
                    },
                    // {
                    //     title: "已处理告警数量",
                    //     value: "hasDealAlarmCount",
                    //     color: "#f5ccd3"
                    // },
                    // {
                    //     title: "未处理告警数量",
                    //     value: "waitDealAlarmCount",
                    //     color: "#bce5e7"
                    // },
                    {
                        title: "今日告警数量",
                        value: "dayTotalCount",
                        color: "#ceefe0"
                    },
                    {
                        title: "本周告警数量",
                        value: "weekTotalCount",
                        color: "#cad8f3"
                    },
                    {
                        title: "本月告警数量",
                        value: "monthTotalCount",
                        color: "#fbead3"
                    },
                ],
                homeData: {}
            }
        },
        mounted() {
            this.getHomeDataFn()
        },
        methods: {
            async getHomeDataFn() {
                const {data} = await request.getHomeData()
                this.homeData = data || {}

                this.initPieChartFn()
                this.initTimeChartFn()

            },
            // 高发区域 - 饼图
            initPieChartFn() {
                const pieChart = echarts.init(document.getElementById("pieChart"));
                const seriesData = this.homeData.highlyAreaStatic || [];
                pieChart.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}: {c} 件"
                    },
                    title: {
                        text: seriesData.length === 0 ? '暂无数据' : this.homeData.highlyArea,
                        top: seriesData.length === 0 ? '50%' : '92%',
                        left: "center",
                        textStyle: {
                            color: '#999',
                            fontSize: 18,
                        },
                    },
                    color: ["#428aff", '#eda918', '#f4516c', '#34c325', '#17c6c8', '#1a55d2', "#ceefe0", "#f5ccd3"],
                    legend: {
                        show: false,
                        orient: 'horizontal', // 图例水平显示
                        icon: 'circle',
                        bottom: 0,
                        itemWidth: 40, // 图例项宽度
                        itemHeight: 14, // 图例项高度
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['0%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: seriesData
                        }
                    ],
                })
            },
            // 高发时段
            initTimeChartFn() {
                const timeChart = echarts.init(document.getElementById("timeChart"));
                const seriesData = this.homeData.highlyTimeStatic || []

                timeChart.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{c} 件"
                    },
                    title: {
                        text: '暂无数据',
                        top: '50%',
                        left: "center",
                        show: seriesData.length === 0,
                        textStyle: {
                            color: '#999',
                            fontSize: 18,
                        }
                    },
                    xAxis: {
                        type: 'category',
                        axisLabel: {
                            color: '#156FDF',
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#DFE6F4'
                            }
                        },
                        data: seriesData.map(item => parseInt(item.name.slice(0, -3))),
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        minInterval: 1,
                        axisLabel: {
                            color: '#3D3D3D',
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#DFE6F4'
                            }
                        },
                    },
                    series: [{
                        type: 'bar',
                        data: seriesData.map(item => item.value),
                        barMaxWidth: '30px',
                        // 设置柱子颜色渐变
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#1670df'},
                                {offset: 1, color: '#629dfc'}
                            ]),
                            barBorderRadius: [10, 10, 0, 0]
                        }
                    }]
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .home {
        display: flex;

        .left-content {
            flex: 3;
            height: 200px;
            margin-right: 40px;
        }

        .right-content {
            flex: 1;
        }

        .item-box {
            .item-title {
                margin: 20px 0;
                display: flex;
                align-items: center;
                color: #1D293F;
                font-size: 18px;
                font-weight: 800;

                &:before {
                    content: "";
                    display: inline-block;
                    width: 8px;
                    height: 18px;
                    margin-right: 10px;
                    border-radius: 4px;
                    background-color: #156fdf;
                }
            }

            .container {
                padding: 40px 20px;

                .bg-img {
                    height: 100px;
                    padding: 14px 40px;
                    background-image: url(../../../assets/img/lt@2x.png);
                    background-size: 100% 100%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .item-info {
                        color: white;
                        text-align: center;

                        span {
                            font-weight: 600;
                            font-size: 26px;
                            line-height: 40px;
                        }

                        p {
                            font-weight: 800;
                            font-size: 18px;
                        }
                    }

                    .line {
                        width: 1px;
                        height: 100%;
                        background-color: rgba(255, 255, 255, 0.5);
                    }
                }

                &.base-info {
                    display: grid;
                    gap: 40px;
                    grid-template-columns: 1fr 1fr;

                    .item-info {
                        padding: 28px 40px;
                        border-radius: 8px;

                        span {
                            font-weight: 800;
                            font-size: 26px;
                            color: #387AFC;
                        }

                        p {
                            margin-top: 28px;
                            font-weight: 800;
                            font-size: 18px;
                            color: #33486E;
                        }
                    }
                }

                &.pie-content {
                    padding: 0 0 10px;
                    height: 300px;
                    text-align: center;

                    #pieChart {
                        width: 100%;
                        height: 100%;
                    }
                }

                &.time-content {
                    padding: 0;
                    height: 300px;
                    text-align: center;

                    #timeChart {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
</style>
